<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Windows7 CSS Tabs</title>
<style type="text/css" media="screen">
body{
	padding:2em 4em;
	background-color: #F0F0F0;
	font-family:"Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:.9em;
}
h1{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-shadow: 1px 1px 1px #FFF;
}
a{
	text-decoration: underline;
	color:#00F;
}
.panel {
	border:1px solid #898C95;
	background-color:#FFF;
	padding:5px;
	clear: both;
}
.panel p {
	margin:10px;
}
.tabs{
	list-style:none;
	padding:0 2px;
	margin:0;
}
.tabs li{
	float: left;
	margin:2px 0 0 0;
    padding:0;
	background-color:#EBEBEB;
	background-image: -moz-linear-gradient(top, #F2F2F2, #CFCFCF);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2F2F2), to(#CFCFCF), color-stop(.5,#EBEBEB),color-stop(.5,#DDDDDD));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF')";
	border:1px solid #898C95;
	border-bottom-width:0;
	position:relative;
	overflow:visible;
}
.tabs li a{
	display:block;
	text-decoration:none;
	color:#000;
	border:1px solid #FFF;
	border-bottom: none;
	padding:1px 4px;
	margin:0;
}
.tabs li:hover{
	background-color:#D9F0FC;
	background-image: -moz-linear-gradient(top, #EAF6FD, #A7D9F5);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EAF6FD), to(#A7D9F5), color-stop(.5,#D9F0FC),color-stop(.5,#BEE6FD));
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5')";
	border-color: #3C7FB1;
	outline:none;
}
.tabs li.selected{
		filter: none;
    -ms-filter: none;
	background-color:#FFF;
	background-image: none;
	border:1px solid #898C95;
	border-bottom: none;
	margin:0 -2px -1px;
	z-index:1001;
}
.tabs li.selected a{
	padding:2px 6px 3px;
}

</style>
</head>

<body>
<h1 align="center">Windows7 CSS Tabs</h1>
<div class="tabs-wrap">
    <ul class="tabs">
        <li><a href="#A">Tab A</a></li>
        <li><a href="#B">Tab B</a></li>
        <li><a href="#C">Tab C</a></li>
        <li><a href="#D">Tab D</a></li>
    </ul>
    <div id="A" class="panel">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula enim in quam faucibus elementum scelerisque lorem accumsan. Curabitur ut sapien eget eros ultrices sollicitudin. Fusce aliquet dui a leo faucibus quis cursus elit commodo. Aliquam et enim arcu. Nunc adipiscing, eros ac aliquet ornare, lectus nulla vestibulum velit, id accumsan odio tellus vitae orci. Ut convallis, odio id rutrum fringilla, lorem mauris rhoncus nisi, ut posuere leo lectus ut ligula. Curabitur laoreet euismod libero ut dapibus. Nulla facilisi. Etiam pulvinar iaculis lacus at mollis. Nullam ut tortor justo, posuere imperdiet mi. Proin gravida placerat sagittis. Quisque eleifend, ipsum bibendum vehicula lobortis, elit nibh elementum enim, aliquet convallis orci dui a nisl. Etiam tempus aliquam risus, id gravida magna accumsan sed. Integer imperdiet condimentum dui ut tristique. Ut vitae risus ac ligula tempus aliquam ac dapibus lacus. Maecenas id dolor est, non accumsan urna. Nunc sit amet est nulla, at elementum risus. Praesent ut massa eu elit <a href="#">adipiscing</a> faucibus. Morbi consectetur tortor vel neque blandit lacinia.</p></div>
    <div id="B" class="panel">
    	<p>In pellentesque, enim eu porta suscipit, sapien augue <a href="#">sagittis</a> lacus, id aliquam mi justo id nisi. Maecenas et augue lacus. Aenean et sapien nibh. Aliquam magna eros, lacinia eget ornare in, rutrum vel sapien. Cras dolor quam, pellentesque mattis laoreet eu, tincidunt commodo ipsum. Quisque sed metus libero. Integer scelerisque elementum velit, elementum luctus lorem commodo aliquet. Maecenas vel augue mattis libero ultrices venenatis. Donec congue nulla vitae nisi pulvinar auctor. Vestibulum iaculis gravida turpis, ut facilisis dolor vehicula non. Morbi sed mi dignissim mauris ultricies vestibulum. Suspendisse eu orci turpis. Quisque convallis est eget urna pulvinar volutpat. Pellentesque non tortor diam. In hac habitasse platea dictumst. Fusce rhoncus tempus orci vitae congue. Donec rhoncus magna enim, at elementum augue. Nullam ipsum turpis, rutrum et rhoncus a, tincidunt nec mauris. Fusce et urna quis lectus varius porta sed ut lectus. Aenean id tellus ipsum.</p></div>
    <div id="C" class="panel">
    	<p>Pellentesque in magna magna. Nam vitae facilisis neque. Aliquam venenatis pulvinar lectus, vitae <a href="#">dictum</a> lorem interdum a. Morbi velit metus, hendrerit eu semper non, blandit sed erat. Etiam sollicitudin vehicula purus, rhoncus malesuada metus aliquet nec. Aliquam nec augue ac massa varius eleifend at fermentum libero. Donec hendrerit tincidunt dui at ullamcorper. Vestibulum cursus nulla eu est ornare eget egestas eros varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus bibendum eleifend augue a vestibulum. Aliquam erat volutpat. Aenean et congue justo. Nam porta semper arcu, nec cursus felis sollicitudin id. Aliquam erat volutpat. Maecenas porttitor blandit felis mattis luctus. Nullam eu lectus nec arcu venenatis porta in vel odio. Pellentesque ac magna leo. In hac habitasse platea dictumst.</p></div>
    <div id="D"  class="panel">
    	<p>Proin consectetur malesuada tellus sit amet auctor. In quam justo, tristique nec sodales id, eleifend eu elit. Donec ultricies, turpis vitae cursus posuere, lacus tellus consequat metus, eget pellentesque quam justo vitae metus. Cras eu ante elit. Suspendisse potenti. Nullam pellentesque egestas massa, in pretium justo ornare eget. Aliquam ultrices dictum consequat. Morbi non ornare odio. Cras hendrerit volutpat enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tristique arcu vel nunc ultrices et egestas urna pellentesque. Vestibulum hendrerit mauris sed purus accumsan vel venenatis orci condimentum.</p><p>Ut lorem turpis, feugiat et accumsan nec, posuere ut dui. Nunc non tortor eu lacus tincidunt bibendum eu aliquam odio. Suspendisse venenatis placerat gravida. Praesent fringilla, massa a sagittis pretium, odio mauris porttitor ligula, ac commodo ante ligula non nulla. Sed tincidunt nisi at est consectetur pulvinar. Nullam sit amet volutpat ligula. Vestibulum eleifend enim in arcu placerat auctor. Aenean dapibus posuere lectus, sit amet euismod lectus faucibus ac. <a href="#">Pellentesque aliquam</a> sem in neque condimentum in pulvinar eros ultricies. Phasellus non ullamcorper ante. Phasellus eget elit velit, sit amet feugiat leo.</p></div>
</div>
<div style="margin-top:4em" class="panel"><p>&copy;2010 David Gonzalez Garcia - <a href="http://davidxl.blogspot.com">davidxl.blogspot.com/</a></p></div>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
	<SCRIPT type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			var tabContainers = $('.tabs-wrap > div');
			tabContainers.hide().filter(':first').show();
			tabs = $('div.tabs-wrap ul.tabs li');
			
			$('div.tabs-wrap ul a').click(function () {
				tabContainers.hide();
				tabContainers.filter(this.hash).show();
				tabs.removeClass('selected');
				$(this).parent().addClass('selected');
				return false;
			}).filter(':first').click();
		});
	</SCRIPT>
</body>
</html>
